<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Update Batch</title>
<link rel="stylesheet" type="text/css" href="css/FinalProjectCSS.css"/>
<link rel="stylesheet" type="text/css" href="css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-combined.min.css">
<script type="text/javascript">
	function flyToPage(task) {
		document.forms[0].task.value = task;
		document.forms[0].submit();
	}
	function update(){
		document.forms[0].elements['modelBatch.startDate'].value = document.getElementById('startDate').value;
		document.forms[0].elements['modelBatch.endDate'].value = document.getElementById('endDate').value;
		if (!validateForm(document.forms[0])) {
			return;
		}
		if(checkDate()==false){
			alert("End date cannot be less than start date!");
			return;
		}else{
			var r=confirm("Are you sure want to update batch?");
			if (r==true){
				flyToPage('updateBatchExe');
			}
		}
	}
	function getDate(){
		var startDate = document.forms[0].elements['modelBatch.startDate'].value;
		var endDate = document.forms[0].elements['modelBatch.endDate'].value;
		var arr = startDate.split('-');
		var date = arr[2]+'-'+arr[1]+'-'+arr[0];
		var strTime = new Date(date);
		
		arr = endDate.split('-');
		date = arr[2]+'-'+arr[1]+'-'+arr[0];
		var endTime = new Date(date);
		
		document.getElementById('startDate').value = document.forms[0].elements['modelBatch.startDate'].value;
		document.getElementById('endDate').value = document.forms[0].elements['modelBatch.endDate'].value;
	
		$('#startDatePicker').data('datetimepicker').setStartDate(strTime);
		$('#endDatePicker').data('datetimepicker').setStartDate(endTime);
	}
	function checkDate(){
		var strTime = document.getElementById('startDate').value;
		var endTime = document.getElementById('endDate').value;
		var arr = strTime.split('-');
		var day = arr[0];
		var month = arr[1];
		var date = month+'/'+day+'/'+arr[2];
		var time1 = new Date(date);
		
		arr = endTime.split('-');
		day = arr[0];
		month = arr[1];
		date = month+'/'+day+'/'+arr[2];
		
		var time2 = new Date(date);
		if(time1>=time2){
			return false;
		}
		return true;
	}
	function setEndDateBasedOnStartDate(e){
		$('#endDatePicker').data('datetimepicker').setLocalDate(e.localDate);
	}
</script>
</head>
<html:javascript formName="eclassForm" dynamicJavascript="true" staticJavascript="true" method="validateForm" page="1"/>
<body onload="javascript:getDate();">
	<%
		if(session.getAttribute("result") != null)
		{
			String message = session.getAttribute("result").toString();
			%>
				<script type="text/javascript">
					window.alert('<%=message%>');
				</script>
			<%
			session.removeAttribute("result");
		}
	%>
		<center>
		<table width="1000px" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">BreadCrumb</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"><br><br>
					<html:form action="/Eclass" method="post">
						<html:hidden property="task" name="eclassForm" />
						<html:hidden property="modelBatch.batchId" name="eclassForm"/>
						<html:hidden property="modelBatch.startDate" name="eclassForm" />
						<html:hidden property="modelBatch.endDate" name="eclassForm" />
						<table align="center" border="0" class="boxShadow">
							<tr>
								<td colspan="2" align="center" class="headerBox formHeaderBackground">Update Batch</td>
							</tr>
							<tr>
								<td style="vertical-align: middle; height:130px;">
									<table align="center" style="border-spacing: 3px;">
										<tr>
											<td class="formListStyle">Batch ID</td>
											<td class="formListStyle"><bean:write name="eclassForm" property="modelBatch.batchId" /></td>
										</tr>
							
<!-- 							<tr> -->
<!-- 								<td style="vertical-align: middle; padding:5px 7px;">Start Date</td> -->
<!-- 								<td style="vertical-align: middle; padding:5px 7px;"> -->
<!-- 									<div id="startDatePicker" class="input-append"> -->
<!-- 										    <input  type="text" id="startDate" data-format="dd-MM-yyyy" readonly="readonly"></input> -->
<!-- 										    <span class="add-on"> -->
<!-- 										      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i> -->
<!-- 										    </span> -->
<!-- 										</div> -->
<!-- 										<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> -->
<!-- 										<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> -->
<!-- 										<script type="text/javascript" src="js/bootstrap.min.js"></script> -->
<!-- 										<script type="text/javascript"> -->
// 									      $('#startDatePicker').datetimepicker({
// 									        format: 'dd-MM-yyyy',
// 									        maskInput: true,
// 									        pickTime: false
// 									      });
// 									      $('#startDatePicker').datetimepicker().on('changeDate', function(e) {
// 											setEndDateBasedOnStartDate(e);
// 										  });
<!-- 									    </script> -->
										<tr>
											<td class="formListStyle">Batch Name</td>
											<td class="formListStyle"><html:text name="eclassForm" property="modelBatch.batchName" /></td>
										</tr>
										
										<tr>
											<td class="formListStyle">Start Date</td>
											<td class="formListStyle">
												<div id="startDatePicker" class="input-append">
													    <input  type="text" id="startDate" data-format="dd-MM-yyyy"></input>
													    <span class="add-on">
													      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
													    </span>
													</div>
													<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
													<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
													<script type="text/javascript" src="js/bootstrap.min.js"></script>
													<script type="text/javascript">
												      $('#startDatePicker').datetimepicker({
												        format: 'dd-MM-yyyy',
												        maskInput: true,
												        pickTime: false
												      });
												    </script>
											</td>
										</tr>
										<tr>
											<td class="formListStyle">End Date</td>
											<td class="formListStyle">
													<div id="endDatePicker" class="input-append">
													    <input  type="text" id="endDate" data-format="dd-MM-yyyy"></input>
													    <span class="add-on">
													      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
													    </span>
													</div>
			<!-- 										<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> -->
			<!-- 										<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> -->
			<!-- 										<script type="text/javascript" src="js/bootstrap.min.js"></script> -->
													<script type="text/javascript">
												      $('#endDatePicker').datetimepicker({
												        format: 'dd-MM-yyyy',
												        maskInput: true,
												        pickTime: false
												      });
												    </script>
											</td>
										</tr>
									</table>
									<table align="center" style="border-spacing: 3px;">
										<tr>
											<td colspan="2" align="center" class="formListStyle">
												<table title="save" style="cursor: pointer;" onclick="javascript:update();">
													<tr>
														<td><img src="images/saveButton.png"/></td>
														<td>&nbsp;<b>Save</b></td>
													</tr>
												</table>												
											</td>
											<td colspan="2" align="right" class="formListStyle">
												<table title="cancel" style="cursor: pointer;" onclick="javascript:flyToPage('batch');">
													<tr>
														<td><img src="images/cancelButton.png"/></td>
														<td>&nbsp;<b>Cancel</b></td>
													</tr>
												</table>
											</td>
										</tr>
									</table>
								</td>
							</tr>
							<tr>
								<td style="vertical-align: middle; padding:5px 7px;">End Date</td>
								<td style="vertical-align: middle; padding:5px 7px;">
										<div id="endDatePicker" class="input-append">
										    <input  type="text" id="endDate" data-format="dd-MM-yyyy" readonly="readonly"></input>
										    <span class="add-on">
										      <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
										    </span>
										</div>
<!-- 										<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> -->
<!-- 										<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script> -->
<!-- 										<script type="text/javascript" src="js/bootstrap.min.js"></script> -->
										<script type="text/javascript">
									      $('#endDatePicker').datetimepicker({
									        format: 'dd-MM-yyyy',
									        maskInput: true,
									        pickTime: false
									      });
									    </script>
								</td>
							</tr>
							
							<tr>
								<td colspan="3" align="center" style="padding:5px 7px;">
									<input type="button" class="buttonStyle" value="Save" onclick="javascript:update();">
									<input type="button" class="buttonStyle" value="Cancel" onclick="javascript:flyToPage('batch');">
								</td>
							</tr>
						</table>
					</html:form><br><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2013. All Rights Reserved.</td>
			</tr>
		</table>
	</center>
</body>
</html>